<template>
	<view>
		<view style="padding-top:94rpx" class="navbar">
			<view class="warp">
				<navigator open-type="navigateBack" class="back icon-left"></navigator>
				<view class="title">
					订单详情
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="padding-top:170rpx">
			<view class="overview" v-if="orderDetail.orderState === 1">
				<view class="status icon-clock">等待付款</view>
				<view class="tips">
					<text>应付金额: {{orderDetail.payMoney}}</text>
					<view class="countdown">
						<text>支付剩余</text>
						<uni-countdown :show-day="false" :minute="30" :second="30" color="#fff" splitorColor="#fff"
							:show-colon="false"></uni-countdown>
					</view>
				</view>
				<view class="button" @click="payMoney">
					去支付
				</view>
			</view>
			<view class="overview" v-else-if="orderDetail.orderState === 2">
				<view class="status icon-clock">待发货</view>
			</view>
			<view class="overview" v-else-if="orderDetail.orderState === 3">
				<view class="status icon-clock">待收货</view>
			</view>
			<view class="overview" v-else-if="orderDetail.orderState === 4">
				<view class="status icon-clock">待评价</view>
			</view>
			<view class="overview" v-else-if="orderDetail.orderState === 5">
				<view class="status icon-clock">已完成</view>
			</view>
			<view class="overview" v-else>
				<view class="status icon-clock">已取消</view>
			</view>
			<view class="goods">
				<view class="item" v-for="item in orderDetail.skus" :key="item.id">
					<navigator :url="'/subpkg/goods_detail/goods_detail?id=' + item.id">
						<image :src="item.image" mode="">
						</image>
						<view class="meta">
							<view class="name">
								{{item.name}}
							</view>
							<view class="type">
								{{item.attrsText}}
							</view>
							<view class="price">
								<view class="original">
									<text class="symbol">￥</text>
									<text>{{item.realPay}}</text>
								</view>
								<view class="actual">
									<text class="text">实付: </text>
									<text class="symbol">￥</text>
									<text>{{item.realPay}}</text>
								</view>
							</view>
							<view class="quantity">
								x{{item.quantity}}
							</view>
						</view>
					</navigator>
				</view>
				<view class="total">
					<view class="row">
						<view class="text">
							商品总价:
						</view>
						<view class="symbol">
							{{orderDetail.totalMoney}}
						</view>
					</view>
					<view class="row">
						<view class="text">
							运费:
						</view>
						<view class="symbol">
							{{orderDetail.postFee}}
						</view>
					</view>
					<view class="row">
						<view class="text">
							实付:
						</view>
						<view class="symbol primary">
							{{orderDetail.payMoney}}
						</view>
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="title">
					订单信息
				</view>
				<view class="row">
					<view>订单编号: {{orderDetail.id}}</view>
					<view>下单时间: {{orderDetail.createTime}}</view>
					<view> 支付方式: {{orderDetail.payType === 1 ? "在线支付":"货到付款"}} </view>
				</view>
			</view>
			<view>
				<view class="caption">
					<text class="text">猜你喜欢</text>
				</view>
				<view class="pullUp">
					<navigator url="/" class="navigate" v-for="item in guessLikeList" :key="item.id">
						<image :src="item.picture" mode="aspectFill" role="img" class="likeImg"></image>
						<view class="likeName">{{item.name}}</view>
						<view class="likePrice">
							<text class="small">$</text>
							<text>{{item.price}}</text>
						</view>
					</navigator>
				</view>
			</view>
		</scroll-view>
		<view class="toobar" v-show="orderDetail.orderState === 1">
			<view class="primary" @click="payMoney">去支付</view>
			<view class="default">取消订单</view>
		</view>
	</view>
</template>

<script>
	import {
		getguessLike
	} from "@/api/index.js"
	import {
		getOrderDetail
	} from '@/api/order.js'
	export default {
		data() {
			return {
				orderId: '',
				orderDetail: {},
				guessLikeList: [],
				params: {
					page: 1, //页数
					pageSize: 10, //每一页数据的数量
				}, //需要传递到接口的参数
				total: 0, //接口数据总条数
				isLoging: false //节流1，设定节流值是false
			};
		},
		onLoad(options) {
			this.orderId = options.type
			// console.log(this.orderId);
			this.getOrderDetails()
			this.getguessLike()
		},
		methods: {
			async getOrderDetails() {
				const {
					result
				} = await getOrderDetail(this.orderId)
				console.log(result);
				this.orderDetail = result
			},
			async getguessLike() {
				const {
					result: {
						items
					}
				} = await getguessLike(this.params)
				// this.total = data.result.counts
				this.guessLikeList = [...this.guessLikeList, ...items]
				// console.log('this.guessLikeList:', this.guessLikeList);
			},
			onReachBottom() {
				this.params.page = ++this.params.page //每次上拉都会页数都会加一
				this.getguessLike() //每次上拉都调用接口数据
			},

			onPullDownRefresh() {
				console.log('下拉加载');
			},
			payMoney() {
				uni.showToast({
					title: '支付失败',
					icon: 'error',
					duration: 1500
				}),
				setTimeout(() => {
					uni.navigateTo({
						url: '/subpkg/order/order?type=0'
					})
				},500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f8;
	}

	.navbar {
		width: 750rpx;
		background-image: url('../../static/images/navigator_bg.png');
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.wrap {
		position: relative;
	}

	.back {
		position: absolute;
		left: 20rpx;
		top: 100rpx;
		line-height: 1;
		font-size: 23px;
		color: #fff;
		z-index: 9;
	}

	.title {
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #fff;
	}

	scroll-view {
		flex: 1;
		height: 100%;
	}

	.overview {
		width: 100%;
		line-height: 1;
		text-align: center;
		background-image: url('../../static/images/navigator_bg.png');
		padding: 15rpx 0;
		color: #fff;
	}

	.status {
		font-size: 36rpx;
	}

	.tips {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		font-size: 24rpx;
	}

	.countdown {
		display: flex;
		align-items: center;
		color: #fff;
		margin-left: 10rpx;
	}

	.button {
		width: 260rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		color: #27ba9b;
		margin: 30rpx auto;
		border-radius: 68rpx;
		background-color: #fff;
	}

	.goods {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #fff;

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			navigator {
				display: flex;

				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.meta {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					position: relative;

					.name {
						height: 80rpx;
						font-size: 26rpx;
						color: #444;
					}

					.type {
						line-height: 1.8;
						padding: 0 15rpx;
						margin-top: 6rpx;
						font-size: 24rpx;
						align-self: flex-start;
						border-radius: 4rpx;
						color: #888;
						background-color: #f7f7f8;
					}

					.price {
						display: flex;
						margin-top: 6rpx;
						font-size: 24rpx;

						.original {
							color: #999;
							text-decoration: line-through;

							.symbol {
								font-size: 20rpx;
							}
						}

						.actual {
							margin-left: 10rpx;
							color: #444;

							.text {
								font-size: 22rpx;
							}

							.symbol {
								font-size: 20rpx;
							}
						}
					}

					.quantity {
						position: absolute;
						bottom: 0;
						right: 0;
						font-size: 24rpx;
						color: #444;
					}
				}
			}
		}

		.total {
			line-height: 1;
			font-size: 26rpx;
			padding: 20rpx 0;
			color: #666;

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0;

				.text {
					font-size: 26rpx;
					color: #666666;
				}

				.symbol::before {
					content: '¥';
					font-size: 20rpx;
				}

				.primary {
					color: #cf4444;
				}
			}
		}
	}

	.detail {
		line-height: 1;
		padding: 30rpx 20rpx 0;
		margin: 20rpx 20rpx 0;
		font-size: 26rpx;
		color: #666;
		border-radius: 10rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: start;
			font-size: 30rpx;
			color: #444;
		}

		.row view {
			display: block;
			padding: 10rpx 0;
		}
	}

	.caption {
		display: flex;
		justify-content: center;
		line-height: 1;
		padding: 36rpx 0 40rpx;
		font-size: 32rpx;
		color: #262626;

		.text {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 28rpx 0 30rpx;
		}

		.text::before,
		.text::after {
			content: "";
			width: 20rpx;
			height: 20rpx;
			background-image: url('../../static/images/bubble.png');
			background-size: contain;
			margin: 0 10rpx;
			margin-top: 0px;
			margin-right: 5px;
			margin-bottom: 0px;
			margin-left: 5px;
		}
	}

	.pullUp {
		width: 100%;
		display: flex; //弹性盒子
		flex-wrap: wrap; //换行
		justify-content: space-between; //主轴上的空白区域，两端不留白，盒子之间的间隙平分
		padding: 0 20rpx;
		background-color: #f4f4f4;
		box-sizing: border-box;

		//单个商品
		.navigate {
			width: 48.5%;
			height: auto;
			padding: 24rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			display: block; //将元素显示为块级元素
			height: auto;
			background-color: #fff;
			box-sizing: border-box;

			.likeImg {
				width: 304rpx;
				height: 260rpx;
				vertical-align: middle;
				display: inline-block;
				overflow: hidden; //该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
			}

			.likeName {
				height: 75rpx;
				margin: 10rpx 0;
				font-size: 26rpx;
				color: #262626;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;

			}

			.likePrice {
				line-height: 1;
				padding-top: 4rpx;
				color: #cf4444;
				font-size: 26rpx;
				display: block;

				.small {
					font-size: 80%;
				}
			}
		}
	}

	.toobar {
		width: 750rpx;
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0 -4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: fixed;
		bottom: 0;
		z-index: 9;

		view {
			width: 200rpx;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
			margin-left: 15rpx;
			font-size: 26rpx;
			border-radius: 72rpx;
		}
		
		.primary {
			color: #fff;
			background-color: #27ba9b;
		}
		
		.default {
			color: #444;
			border: 1rpx solid #ccc;
		}
	}
</style>